<template>
	<view>
		<view class="bg-color">
			<view class="dates">
				<text>2020年4月1日-4月7日</text>
			</view>
			<view class="weeks">
				<view v-for="(item,index) in dataList" :key="index" @click="selectTap(index)">
					<text>{{item.week}}</text>
					<text :class=" currentTab == index ? 'active' : ''">{{item.day}}</text>
				</view>
			</view>
		</view>

		<view class="">
			<view v-for="(item,index) in scheduleList" :key="index">
				<view class="time">{{item.time}}</view>
				<view style="display: flex;margin: 30rpx auto;width: 683rpx;" v-for="(items,index) in item.list" :key="index">
					<text class="time-range">{{items.time}}</text>
					<text class="myclass">{{items.class}}</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'mealPlan',
		props: ['lists', 'dataList','scheduleList'],
		data() {
			return {
				currentTab: 0,
			}
		},
		methods: {
			selectTap(index) {
				this.currentTab = index;
			}
		}
	}
</script>

<style lang="less">
	@blue: #FFD0AA;

	.bg-color {
		background-color: @blue;
		height: 240rpx;
		padding: 0 20rpx;
	}

	.dates {
		width: 674rpx;
		height: 132rpx;
		margin: 0 auto;
		background: url(../../static/dailybaby/mealplan.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin-bottom: 0rpx;
		text {
			display: block;
			text-align: center;
			line-height: 132rpx;
			color: @blue;
			font-size: 30rpx;
		}
	}

	.active {
		background-color: #fff;
		color: @blue !important;
		font-weight: 600;
	}

	.weeks {
		display: flex;
		justify-content: space-around;

		text {
			display: block;
			text-align: center;
			color: #fff;
			font-size: 24rpx;
		}

		text:nth-child(2) {
			margin: 10rpx 0;
			padding: 9rpx 16rpx;
			border-radius: 10rpx;
		}
	}
	
	.time{
		color:@blue;
		text-align: center;
		font-size: 28rpx;
		font-weight: 600;
		margin: 60rpx 0 20rpx 0;
	}
	
	.time-range{
		background-color: #6CD2DF;
		width: 249rpx;
		height: 56rpx;
		line-height: 56rpx;
		border-radius: 28rpx;
		text-align: center;
		font-size: 28rpx;
		color: #fff;
		z-index: 9;
		// margin-right: -28rpx;
	}
	
	.myclass{
		margin-left: -28rpx;
		background-color: #E4F5F9;
		width: 462rpx;
		height: 56rpx;
		line-height: 56rpx;
		border-top-right-radius: 28rpx;
		border-bottom-right-radius: 28rpx;
		text-align: center;
		font-size: 28rpx;
		color: @blue;
	}
</style>
